@import '~@/scss/GlobalVariables';

$tablet-width: 1270px;
.floating-buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  bottom: 150px;
  height: 220px;
  right: 60px;
  z-index: 9999;
  justify-content: space-around;
}

.vintage-header {
  background-color: $mew-green;
  color: $white;
  text-align: center;
  width: 100%;

  a {
    color: $white;
    text-decoration: underline;
  }
}

@media all and (max-width: 1025px) {
  .floating-buttons-container {
    bottom: 175px;
    height: 168px;
    right: 16px;
  }
}

.wrap {
  padding-top: 85px;

  // Tablet
  @media all and (min-width: calc(#{$mobile-width} + 1px)) and (max-width: $tablet-width) {
    padding-top: 70px;
  }

  @media all and (max-width: $mobile-width) {
    padding-top: 70px;
  }
}

.page-container {
  @media all and (max-width: $tablet-width) {
    padding: 0;
  }
}

.scrollup-container {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;

  &.active {
    opacity: 1;
    pointer-events: initial;
  }
}

//********************************************************
// Desktop & Tablet menu
//********************************************************
.fixed-header-wrap {
  @media all and (max-width: $tablet-width) {
    display: none;
  }
}

.fixed-header-border-bottom {
  //border-bottom: 1px solid black;
  box-shadow: 0 0 2px #0000003b;
}

.fixed-header {
  background-color: $background-color-white;
  left: 0;
  position: fixed;
  // padding: 0 25px;
  top: 0;
  width: 100%;
  //z-index: $z-menu + 100;
  z-index: 1000;

  &.tiny-header {
    box-shadow: 0 2px 13px $tiny-header-shadow-color;

    .header-container {
      padding: 2.5px 25px;
    }
  }

  .header-container {
    align-items: center;
    display: flex;
    padding: 12px 25px;
    transition: all 0.3s ease;

    @media all and (max-width: $tablet-width) {
      padding: 20px 0;
    }

    .top-logo {
      line-height: 10px;

      .logo-large {
        height: 33px;
        transition: all 0.3s ease;
      }

      .logo-large-mewcx {
        height: 55px;
        transition: all 0.3s ease;
      }

      .logo-small-mewcx {
        height: 33px;
      }

      .logo-small {
        height: 28px;
      }

      .beta-tag {
        color: white;
        margin-left: 5px;
        height: 17px;
      }
    }

    .top-menu {
      margin-left: auto;
      position: relative;

      a:link,
      a:visited,
      a:hover,
      a:active {
        color: $text-base-color;
      }

      span {
        color: $text-base-color;
      }

      @media all and (max-width: $tablet-width) {
        display: none;
      }

      .nav {
        align-items: center;

        .nav-item a,
        .nav-item a span {
          color: $text-base-color;
          outline: none;
        }
      }

      .buy-eth {
        position: relative;
        .buy-eth-icon {
          position: absolute;
          top: 19px;
          left: -13px;
          height: 24px;
        }
      }

      .language-menu-container {
        margin-left: 20px;
        position: relative;

        .down-arrow {
          position: absolute;
          right: 0;
          top: 15px;
          color: #05c0a5;
          display: inline-block;
          //margin-left: 0.255em;
          vertical-align: 0.255em;
          content: '';
          border-top: 0.3em solid;
          border-right: 0.3em solid transparent;
          border-bottom: 0;
          border-left: 0.3em solid transparent;
        }
      }

      .language-menu {
        margin-left: 0;

        .dropdown-menu {
          a {
            $language-item-padding-value: 8px;

            font-size: 13px;
            padding-bottom: $language-item-padding-value;
            padding-left: 15px;
            padding-top: $language-item-padding-value;
          }
        }
      }

      .current-language-flag {
        align-items: center;
        display: flex;

        img {
          border-radius: 3px;
          box-shadow: 0 0 1pt 1pt $mew-green;
          flex: 45;
          height: 16px;
          margin-right: 10px;
        }
      }

      > ul {
        > li {
          display: inline-block;
          font-size: 14px;
          margin-left: 26px;
          padding: 13px 0;

          &.get-free-wallet {
            margin-left: 10px;
          }

          &.first-button {
            margin-left: 30px;
          }

          &.nopadding {
            padding: 0;
          }

          a {
            color: $text-color-3;
          }
        }
      }
    } // .top-menu
  } // .header-container
} // .fixed-header

//********************************************************
// .notification-menu-container
//********************************************************
.notification-menu-container {
  display: flex;
  align-items: center;
  i {
    font-size: 18px;
    color: $dark-blue-1;
  }
}

.identicon-dropdown {
  padding: 0 !important;
}

%button-templates {
  border: 1px solid $border-green;
  border-radius: 4px;
  color: $text-white;
  cursor: pointer;
  display: block;
  font-size: 12px;
  overflow: hidden;
  padding: 10px 20px;
  position: relative;

  &:hover {
    background-color: $white;
    color: $text-color-green;
  }
}

.get-free-wallet {
  position: relative;
  cursor: pointer;
  //animation: fadeOutFromBlock 0.5s ease-out;
  //animation-fill-mode: forwards;
  display: none;
  opacity: 0;
  overflow: hidden;
  margin-left: 10px;

  .nav-link {
    padding: 7px 0;
  }

  .access-button {
    @extend %button-templates;

    background-color: $text-color-green;
  }

  .get-free-wallet-button {
    @extend %button-templates;

    color: $text-color-green;

    &:hover {
      background-color: $text-color-green;
      color: $text-white;
    }
  }

  &.show {
    animation: fadeInFromNone 0.5s ease-out;
    animation-fill-mode: forwards;
  }

  &.hide {
    animation: fadeOutFromBlock 0.5s ease-out;
    animation-fill-mode: forwards;
  }

  @keyframes fadeInFromNone {
    0% {
      height: 0;
      opacity: 0;
      //margin-left: 0;
    }

    50% {
      display: inline-block;
      height: 54px;
      opacity: 0.5;
    }

    100% {
      display: inline-block;
      height: 54px;
      opacity: 1;
    }
  }

  @keyframes fadeOutFromBlock {
    0% {
      height: 54px;
      opacity: 1;
    }

    50% {
      display: none;
      height: 54px;
      opacity: 0.5;
    }

    100% {
      display: none;
      height: 0;
      opacity: 0;
      //margin-left: 0;
    }
  }
} // .get-free-wallet

//********************************************************
// .settings-container
//********************************************************
.settings-container {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 20px;

  .blockie-image {
    position: absolute;
    top: -9px;
    right: 20px;
  }

  i {
    color: $dark-blue-1;
    font-size: 18px;
    margin-left: 7px;
  }
}

.cursor-pointer {
  cursor: pointer;
}

//********************************************************
// .mobile-menu-content
//********************************************************
.mobile-menu--underblock {
  @media all and (min-width: calc(#{$tablet-width} + 1px)) {
    display: none;
  }

  pointer-events: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  transition: all 0.2s linear;
  background-color: $menu-under-background-color;
  opacity: 0;

  &.mobile-menu-open {
    opacity: 1;
  }
}

.mobile-menu--container {
  position: fixed;
  width: 100vw;
  //z-index: $z-menu + 100;
  z-index: 1000;
  top: 0;
  left: 0;
  transition: all 0.2s linear;
  height: 0;
  overflow: hidden;
  background-color: white;

  .menu-content {
    padding-top: 80px;
  }

  ul {
    padding: 0;
    li {
      > * {
        padding: 20px;
        font-size: 20px;
        display: block;
        color: $text-base-color;
      }
    }
  }

  @media all and (max-width: $tablet-width) {
    &.mobile-menu-open-height-change {
      height: 100vh;
    }
  }
}

@media all and (max-width: $tablet-width) {
  .mobile-menu-boxshadow {
    //box-shadow: 0 0 1px #adadad1f;
  }
}

//********************************************************
// .mobile-language-menu-container
//********************************************************
.mobile-language-menu-container {
  user-select: none;
  display: flex !important;
  align-items: center;
  padding: 16px 21px 16px 7px !important;

  .arrows {
    margin-left: auto;
  }
}

.mobile-language-menu {
  .current-language-flag {
    display: flex;
    align-items: center;

    &::after {
      display: none;
    }

    img {
      height: 25px;
      border-radius: 4px;
    }
    p {
      margin-right: 15px;
      font-size: 20px;
      display: block;
      color: #506175;
    }
  }
}
